<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h2>1.双大括号表达式</h2>
        <p>{{msg}}</p>
        <p>{{msg.toUpperCase()}}</p>
        <p v-text="msg"></p>
        <p v-html="msg"></p>

        <h2>2. 指令一： 强制数据绑定</h2>
        <img src="imgUrl">
        <img v-bind:src="imgUrl">
        <img :src="imgUrl">
        <h2>3. 指令二： 绑定事件监听</h2>
        <button v-on:click="test">test1</button>
        <button @click="test2('abc')">test2</button>

    </div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                msg:'<a href="http://www.baidu.com">I Will Back!</a>',
                imgUrl:'http://cn.vuejs.org/images/logo.png'
            },
            methods:{
                test(){
                    alert('hehe!')
                },
                test2(content){
                    alert(content)
                }
            }
        })
    </script>
</body>
</html>